// import React, { useState, useEffect, useRef } from 'react';
// import { Sankey } from '@antv/g2plot';
// import axios from 'axios';
//
// const monitorinfo = ({ deviceId }) => {
//     const [monitorInfo, setMonitorInfo] = useState({});
//     const [sankey, setSankey] = useState(null);
//     const ed = useSelector(state => state.ed); // Assuming you're using Redux or similar for state management
//     const sankeyRef = useRef(null);
//
//     useEffect(() => {
//         if (ed.device_id) {
//             initData();
//         }
//     }, [ed.device_id]);
//
//     const service = axios.create({
//         baseURL: 'your_api_base_url', // Replace with your API base URL
//         headers: {
//             Authorization: 'your_token', // Replace with your authorization token
//         },
//     });
//
//     const initData = async () => {
//         try {
//             const url = `/device/findDeviceDetail?id=${ed.device_id}`;
//             const response = await service.get(url);
//             const data = response.data.engineer;
//             setMonitorInfo(data);
//             if (sankeyRef.current) {
//                 const updatedData = [
//                     { source: '工程id', target: data.serial_number, value: 20 },
//                     { source: '工程名', target: data.name, value: 20 },
//                     { source: '工程类型', target: data.type, value: 20 },
//                     { source: '工程地址', target: data.address, value: 20 },
//                     { source: '状态', target: data.status, value: 20 },
//                 ];
//                 sankeyRef.current.changeData(updatedData);
//             }
//         } catch (error) {
//             console.error('Error fetching data:', error);
//         }
//     };
//
//     useEffect(() => {
//         if (sankeyRef.current === null) {
//             const data = [
//                 { source: '工程id', target: monitorInfo.serial_number, value: 20 },
//                 { source: '工程名', target: monitorInfo.name, value: 20 },
//                 { source: '工程类型', target: monitorInfo.type, value: 20 },
//                 { source: '工程地址', target: monitorInfo.address, value: 20 },
//                 { source: '状态', target: monitorInfo.status, value: 20 },
//             ];
//             const sankeyInstance = new Sankey(sankeyRef.current, {
//                 data,
//                 width: 300,
//                 height: 200,
//                 sourceField: 'source',
//                 targetField: 'target',
//                 weightField: 'value',
//                 nodeWidthRatio: 0.008,
//                 nodePaddingRatio: 0.03,
//             });
//             sankeyInstance.render();
//             setSankey(sankeyInstance);
//         }
//     }, [monitorInfo]);
//
//     return (
//         <div ref={sankeyRef} />
//     );
// };
//
// export default monitorinfo;
